var sliderWidth = 96; // 需要设置slider的宽度，用于计算中间位置
Page({
  data: {
    grids: [0, 1, 2, 3, 4, 5, 6, 7, 8],
    imgUrls: [
      'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
      'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
      'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
    ],
    indicatorDots: true,
    autoplay: true,
    interval: 3000,
    duration: 1000,
    circular: true,
    tabs: ["Angular", "ES6", "Vue"],
    activeIndex: 0,
    sliderOffset: 0,
    sliderLeft: 0,
    articleAngular: [
      {
        img: '../../static/img/0.png',
        index:0,
        title: 'NativeScript 2.2将Webpack引入Angular项目',
        content: 'NativeScript 2.2已经发布，该版本改进了UI，支持iOS 10 Beta 3，并将Webpack引入了以Angular 2为基础的项目。'
      },
      {
        img: '../../static/img/1.jpg',
        index: 1,
        title: '原Angular团队成员投身JavaScript框架Aurelia',
        content: 'JavaScript框架Aurelia已经达到了1.0版本，原Angular团队成员Eisenberg表示，投身Aurelia的一部分原因是Angular 2的发展方向。'
      },
      {
        img: '../../static/img/3.jpg',
        index: 2,
        title: 'Angular 2与TypeScript概览',
        content: '据Google的工程主管介绍，有30万开发人员已经使用了即将发布的Angular 2。本文作者在使用了Angular 2近十个月后，相信它对JavaScript社区将会产生深远的影响，因此撰文，从宏观层面上向你阐述Angular 2框架。'
      },
      {
        img: '../../static/img/4.jpg',
        index: 3,
        title: '18年老司机告诉你：我为什么选择Angular 2',
        content: '没有选择是痛苦的，有太多的选择却更加痛苦。而后者正是目前前端领域的真实写照。新的框架层出不穷：它难吗？它写得快吗？可维护性怎样？运行性能如何？社区如何？前景怎样？好就业吗？好招人吗？组建团队容易吗？18年老司机告诉你，他是怎样做出选择的。'
      }
    ],


    articleEs6: [
      {
        img: '../../static/img/es0.jpg',
        index: 0,
        title: '深入浅出ES6：魔力四射的生成器 Generators 续篇',
        content: '​在之前的文章中，作者曾为大家介绍了ES6中引入的，最具魔力的新特性，即生成器Generators，当时，作者提到，生成器还有更多未提及的特性，本文将继续为大家奉献上有关生成器的深度干货内容。'
      },
      {
        img: '../../static/img/es1.jpg',
        index: 1,
        title: '深入浅出ES6：集合',
        content: 'ES6标准中所谓“键值集合”：Set，Map，WeakSet和WeakMap，在大多数方面和其它语言中的哈希表一样，不过，正因为JS是不同的，标准委员会在其中做了些有趣的权衡与调整。'
      }
    ],


    articleVue: [
      {
        img: '../../static/img/vue0.jpg',
        index: 0,
        title: '饿了么基于Vue 2.0的通用组件库开发之路',
        content: '​基于Vue 2.0的通用组件库如何开发？饿了么Element开发团队带来了他们的回答，从设计、协作、开发流程和具体的代码，相信淀粉们能受到一定的启发。'
      },
      {
        img: '../../static/img/vue1.jpg',
        index: 1,
        title: '以Vuex 2.0 为例，提升源码分析技能',
        content: '学习源码，是开发者的必备技能。作者深入分析了Vuex 2.0 的源码，让我们跟随他的思路，来一起提升源码学习技能吧！'
      },
      {
        img: '../../static/img/vue2.jpg',
        index: 2,
        title: 'Vue 2.0 快速上手指南',
        content: '崭露头角的JavaScript框架Vue 2.0版本已经发布，如何快速上手Vue2.0？来看看Vue的作者尤雨溪怎么说！'
      }
    ]
  },
  onLoad: function () {
    var that = this;
    wx.getSystemInfo({
      success: function (res) {
        that.setData({
          sliderLeft: (res.windowWidth / that.data.tabs.length - sliderWidth) / 2,
          sliderOffset: res.windowWidth / that.data.tabs.length * that.data.activeIndex
        });
      }
    });
  },
  tabClick: function (e) {
    wx.showToast({
      title: '玩命中',
      icon: 'loading',
      duration: 300
    });
    this.setData({
      sliderOffset: e.currentTarget.offsetLeft,
      activeIndex: e.currentTarget.id
    });
  },
  // 跳转详情
  goDetail: function () {
    wx.navigateTo({
      url: '../article/angular/angular1'
    })
  }
});